<%@ taglib tagdir="/WEB-INF/tags" prefix="onadake" %>

<onadake:layout bodyEnd="index_anonymous_beforeEnd.jsp" >

  <!-- Carousel
  Change your images in the main.css file.
  ================================================== -->
  <div id="header" class="carousel slide animated fadeIn" data-ride="carousel">
    
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#header" data-slide-to="0" class="active"></li>
      <li data-target="#header" data-slide-to="1"></li>
      <li data-target="#header" data-slide-to="2"></li>
    </ol>
    
    <div class="carousel-inner">
      <div class="item one active">
        <div class="container animated fadeInUp">
          <div class="carousel-caption">
            <h1>Introducing </h1>
            <h1>Our Name</h1>
            <p class="lead margin-40"><em>A Social Network Designed For Women</em></p>
            <a class="btn-main" href="${pageContext.request.contextPath}/register"><i class="icon-chevron-right"></i>Sign up Now</a>
            <a class="btn-main" href="${pageContext.request.contextPath}/signin"><i class="icon-chevron-right"></i>Log In</a>
          </div>
        </div>
      </div>
      <div class="item two">
        <div class="container">
          <div class="carousel-caption">
            <h1>Get</h1>
            <h1>Health Tips</h1>
            <p class="lead margin-40"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</em></p>
            <a class="btn-main" href="${pageContext.request.contextPath}/register"><i class="icon-chevron-right"></i>Sign up Now</a>
            <a class="btn-main" href="${pageContext.request.contextPath}/signin"><i class="icon-chevron-right"></i>Log In</a>
          </div>
        </div>
      </div>
      <div class="item three">
        <div class="container">
          <div class="carousel-caption">
            <h1>Shopping</h1>
            <h1>Advice</h1>
            <p class="lead margin-40"><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</em></p>
            <a class="btn-main" href="${pageContext.request.contextPath}/register"><i class="icon-chevron-right"></i>Sign up Now</a>
            <a class="btn-main" href="${pageContext.request.contextPath}/signin"><i class="icon-chevron-right"></i>Log In</a>
          </div>
        </div>
      </div>
    </div>
    <a class="left carousel-control hidden-xs" href="#header" data-slide="prev"><i class="fa fa-angle-left"></i></a>
    <a class="right carousel-control hidden-xs" href="#header" data-slide="next"><i class="fa fa-angle-right"></i></a>
  </div><!-- /.carousel -->
    
    
  <!--Services-->
  <section id="services" class="section">
    <div class="container">
      <div class="row text-center">
        
        <!--Seciton 1-->
        <div class="col-sm-3 service margin-30">
          <a href="#">
            <i class="fa fa-ambulance fa-4x light-gray"></i>
            <h3>Health</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </a>
        </div>
        
        <!--Seciton 2-->
        <div class="col-sm-3 service margin-30">
          <a href="#">
            <i class="fa fa-female fa-4x light-gray"></i>
            <h3>Beauty</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </a>

        </div>
        
        <!--Seciton 3-->
        <div class="col-sm-3 service margin-30">
          <a href="#">
            <i class="fa fa-shopping-cart fa-4x light-gray"></i>
            <h3>Shopping</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </a>

        </div>
        
              <!--Seciton 4-->
        <div class="col-sm-3 service margin-30">
          <a href="#">
            <i class="fa fa-glass fa-4x light-gray"></i>
            <h3>Food</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
          </a>

        </div>
        
      </div>
    </div>
  </section>
    
  <!--Message Section-->
  <section id="message" class="section">
    <div class="container">
      <div class="row margin-40">
        <div class="col-sm-12 text-center">
          <h2>Join today to share your best moments with your girl friends</h2>
        </div>
      </div>
      
      <div class="row">
        <div class="col-sm-12 text-center">
          <a class="more" href="${pageContext.request.contextPath}/register"><i class="fa fa-chevron-circle-right fa-2x white"></i></a>
        </div>
      </div>
    </div>
  </section>
    
</onadake:layout>